<template>
  <view>
    <van-nav-bar title="查看物流" left-arrow fixed class="loginNav" @click-left="onClickLeft"/>
    <div class="line"></div>
    <div class="state">
      <img>
      <div class="info">
        <p>
          物流状态：
          <em>已签收</em>
        </p>
        <p>承运来源：中通快递</p>
        <p>运单编号：427725534166</p>
        <p>官方电话：暂无</p>
      </div>
    </div>
    <div class="line"></div>
    
    <div class="courier">
      <div class="left">
        <img src="@/static/logistics/kdy.png">
        <span>派送员</span>
        <p>小明</p>
      </div>
      <div class="right">
        <img src="@/static/logistics/dh.png">
      </div>
    </div>
    
    <div class="line"></div>

    <div class="step">
      <div class="title"><img src="@/static/logistics/cn_logo.png">本数据由<span>菜鸟包裹</span>提供</div>
      <div class="list">
        <div>
          <i class="icon"></i>
          <div class="txt">
            [菜鸟驿站]您已在美宜佳A111龙华南源新村店完成取件，感谢您使用菜鸟驿站，期待再次为您服务。
            <p>2018-12-01  18:10:10</p>
          </div>
        </div>
        <div>
          <i class="icon"></i>
          <div class="txt">
            [菜鸟驿站]您已在美宜佳A111龙华南源新村店完成取件，感谢您使用菜鸟驿站，期待再次为您服务。
            <p>2018-12-01  18:10:10</p>
          </div>
        </div>
        <div>
          <i class="icon"></i>
          <div class="txt">
            [菜鸟驿站]您已在美宜佳A111龙华南源新村店完成取件，感谢您使用菜鸟驿站，期待再次为您服务。
            <p>2018-12-01  18:10:10</p>
          </div>
        </div>
        <div>
          <i class="icon"></i>
          <div class="txt">
            [菜鸟驿站]您已在美宜佳A111龙华南源新村店完成取件，感谢您使用菜鸟驿站，期待再次为您服务。
            <p>2018-12-01  18:10:10</p>
          </div>
        </div>
        <div>
          <i class="icon"></i>
          <div class="txt">
            [菜鸟驿站]您已在美宜佳A111龙华南源新村店完成取件，感谢您使用菜鸟驿站，期待再次为您服务。
            <p>2018-12-01  18:10:10</p>
          </div>
        </div>

      </div>
    </div>
  </view>
</template>

<script>
export default {
  data() {
    return {};
  },
  onLoad(option) {},
  methods: {
    onClickLeft() {
      uni.navigateBack();
    }
  }
};
</script>

<style lang="less">
.state {
  padding: 30upx;
  img {
    width: 130upx;
    height: 130upx;
    float: left;
    margin-right: 20upx;
  }
  .info {
    p {
      color: #999;
      font-size: 22upx;
    }
    p:nth-child(1) {
      color: #333;
      font-size: 24upx;
      em {
        color: #ff242e;
        display: inline;
      }
    }
  }
}

.courier {
  padding: 14upx 30upx;
  display: flex;
  justify-content: space-between;
  .left {
    img {
      float: left;
      width: 60upx;
      height: 60upx;
      margin-right: 20upx;
      vertical-align: middle;
    }
    span {
      font-size: 22upx;
      color: #999;
    }
    p {
      font-size: 26upx;
      color: #333;
    }
  }
  .right {
    border-left: 1upx solid #ddd;
    img {
      width: 49upx;
      height: 48upx;
      margin-left: 40upx;
      margin-top: 10upx;
    }
  }
}

.step{
  .title{
    border-bottom: 1upx solid #DFDFDF;
    height: 80upx;
    line-height: 80upx;
    color: #555;
    font-size: 22upx;
    padding-left: 30upx;
    span{color: #0B57A6}
    img{width: 37upx;height: 23upx;margin-right: 20upx;vertical-align: middle;}
  }
  .list{
    padding: 30upx 30upx 30upx 40upx;
    >div{
      border-left: 1upx solid #ddd;
      position: relative;
      padding-bottom: 30upx;
      .txt{
        margin-left: 40upx;
        padding-bottom: 30upx;
        font-size: 26upx;
        line-height: 38upx;
        color: #999;
        border-bottom: 1upx solid #DFDFDF;
      }
      
      .icon{
        background: url('~@/static/logistics/1.png') no-repeat;
        background-size: 100% 100%;
        width: 12upx;
        height: 12upx;
        position: absolute;
        left: -6upx;
        top: 8upx;
      }
    }

    >div:nth-child(1){
      .icon{
        background: url('~@/static/logistics/0.png') no-repeat;
        background-size: 100% 100%;
        width: 26upx;
        height: 26upx;
        position: absolute;
        left: -13upx;
        top: -6upx;
      }
    }
    >div:last-of-type{
      padding-bottom: 0;
      .txt{border: none;padding-bottom: 0;}
    }


  }
}
</style>
